<template>
    <div>
        <div>
            <div v-if="codeDialogVisible">
                <!-- 微信支付二维码 -->
                <div style="display:flex; flex-direction: column; justify-content: center; align-items: center">
                    <qriously :value="this.orderInfo.codeUrl" :size="300"/>
                    <span style="text-align: center; font-size: 32px">{{ this.orderInfo.orderPrice / 100 }}元</span>
                    <span style="text-align: center; font-size: 32px">请使用微信扫码支付</span>
                </div>
            </div>
            <div v-if="payFlag" style="text-align: center">
                <h1>支付成功</h1>
            </div>
            <div v-if="timeout" style="text-align: center">
                <h1>订单已超时，请重新生成订单</h1>
            </div>
        </div>
    </div>
</template>

<script>

import { getGatewayPackage, listGatewayPackageSelect } from '@/api/product/gatewayPackage'
import { queryOrderStatus } from '@/api/order/order'

export default {
    name: 'index',
    props: {
        orderInfo: {
            type: Object
        }
    },
    data() {
        return {
            gatewayPackageList: [],
            form: {
                productId: null,
                orderType: '0',
                attach: {}
            },
            timer: null,
            codeDialogVisible: true,
            payFlag: false,
            timeout: false,
            productInfo: {
                price: '选择套餐后查看',
                dayNum: '选择套餐后查看'
            }
        }
    },
    created() {
        // 启动定时器
        this.timer = setInterval(() => {
            this.queryOrderStatus()
        }, 2000)
    },
    destroyed() {
        if (this.timer != null) {
            clearInterval(this.timer)
        }
    },
    methods: {
        getList() {
            listGatewayPackageSelect().then(response => {
                this.gatewayPackageList = response.data
            })
        },
        // 关闭微信支付二维码对话框时启用"确认支付"按钮
        closeDialog() {
            clearInterval(this.timer)
        },
        // 查询订单状态
        queryOrderStatus() {
            queryOrderStatus(this.orderInfo.orderNo).then(response => {
                console.log('查询订单状态', response)
                let orderStatus = response.msg
                if (orderStatus === '支付成功') {
                    clearInterval(this.timer)
                    this.codeDialogVisible = false
                    this.payFlag = true

                    setTimeout(() => {
                        this.$emit('paySuccess')
                    }, 3000)
                }
                if (orderStatus === '超时已关闭') {
                    clearInterval(this.timer)
                    this.codeDialogVisible = false
                    this.timeout = true
                }
            })
        },
        changeProduct(productId) {
            getGatewayPackage(productId).then(response => {
                this.productInfo = response.data
            })
        }
    }
}
</script>

<style scoped>

</style>
